<template>
    <span>
        <Button type="primary" size="small" @click="handleBatchLANIPAddShow">批量添加局域网IP</Button>
        <Modal v-model="batch_lanip_add_modal" title="批量添加局域网IP" :mask-closable="false">
            <Form :model="lanip_current" :label-width="80">
                <FormItem label="设备ID">
                    <template v-for="row in selected_clients" :key="row.client_id">
                        <ClientTag :client_id="lanip_current.client_id" />
                    </template>
                </FormItem>
                <FormItem label="名称">
                    <Input v-model="lanip_current.lanip_name" placeholder="请输入名称"></Input>
                </FormItem>
                <FormItem label="局域网IP">
                    <Input v-model="lanip_current.lanip_ip" placeholder="请输入局域网IP"></Input>
                </FormItem>
                <FormItem label="设备类型">
                    <Input v-model="lanip_current.lanip_type" placeholder="请输入设备类型"></Input>
                </FormItem>
                <FormItem label="是否启用">
                    <Switch v-model="lanip_current.lanip_enable"></Switch>
                </FormItem>
            </Form>
            <template #footer>
                <Button type="primary" @click="handleBatchLANIPAddOk">确定</Button>
                <Button @click="batch_lanip_add_modal = false">取消</Button>
            </template>
        </Modal>
    </span>
</template>

<script>
export default {
    name: "LANIPBatchAddButton",
    props: {
        clients: Array
    },
    data() {
        return {
            batch_lanip_add_modal: false,
            lanip_current: {
                lanip_name: "",
                lanip_ip: "",
                lanip_type: "",
                lanip_enable: false
            },
            selected_clients: [],
        }
    },
    methods: {
        handleBatchLANIPAddShow() {
            this.selected_clients = this.clients;
            if (this.selected_clients.length == 0) {
                this.errorMessage('请选择客户端');
                return;
            }
            this.lanip_current.lanip_name = '';
            this.lanip_current.lanip_ip = '';
            this.lanip_current.lanip_type = '';
            this.lanip_current.lanip_enable = false;
            this.batch_lanip_add_modal = true;
        },
        handleBatchLANIPAddOk() {
            if (this.lanip_current.lanip_name == '') {
                this.errorMessage('请输入名称');
                return;
            }
            if (this.lanip_current.lanip_ip == '') {
                this.errorMessage('请输入局域网IP');
                return;
            }
            let client_ids = [];
            for (let i = 0; i < this.selected_clients.length; i++) {
                client_ids.push(this.selected_clients[i].client_id);
            }
            this.$http.post('/add_batch_lanip', {
                client_ids: client_ids,
                lanip_name: this.lanip_current.lanip_name,
                lanip_ip: this.lanip_current.lanip_ip,
                lanip_type: this.lanip_current.lanip_type,
                lanip_enable: this.lanip_current.lanip_enable
            }).then((res) => {
                if (res.status == 'ok') {
                    this.$Message.success(`成功添加 ${res.data} 条记录`)
                    this.$emit('success')
                    this.batch_lanip_add_modal = false
                } else {
                    this.errorMessage(res.data)
                }
            })
        }
    }
}
</script>
